<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no" />
    <title>首页</title>
    <link rel="stylesheet" type="text/css" href="../c/aui.css" />
    <style media="screen">
        .sx-city {
            color: #fff;
            opacity: 0.5;
            font-size: 0.75rem;
            padding: 0.75rem;
        }

        .sx-city .l {
            background: url('../i/city.png') no-repeat left center;
            background-size: 0.85rem;
            padding-left: 1rem;
            vertical-align: middle;
        }

        .sx-city b {
            font-weight: normal;
        }

        .sx-city .r {
            background: url('../i/right-bai.png') no-repeat right center;
            background-size: 0.5rem;
            padding-right: 0.7rem;
            vertical-align: middle;
        }

        .sx-tc-list {
            background: none !important;
            border: !important;
            padding: 0.1rem;
        }

        .sx-tc-list .aui-col-xs-6 {
            text-align: left;
            margin-bottom: 1rem;
            padding: 0.1rem;
        }

        .sx-tc-list .sx-tags {
            overflow: hidden;
            padding: 0.2rem 0;
        }

        .sx-tc-list .sx-tags span {
            background: #393B44 !important;
            padding: 0.1rem 0.4rem;
            display: inline-block;
            border-radius: 0.15rem;
            margin-right: 0.2rem;
            font-size: 0.65rem;
            opacity: 0.7;
            color: #fff;
        }

        .sx-tc-list .aui-ellipsis-2 {
            font-size: 0.75rem;
            opacity: 0.7;
            line-height: 1.2rem;
            padding: 0.2rem 0.4rem;
            -webkit-line-clamp: 2;
            height: 2.5rem;
        }
        .sx-tc-list .username{
          position: absolute;
          left: 0rem;
          bottom: 0;
          width: 100%;
          background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4));
          background-image: -o-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4));
          background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4));
          padding: 0.5rem;
        }
        .sx-tc-list .username img{
            border-radius: 50%;
            width: 1.5rem;
            height: 1.5rem;
            display: inline-block;
            vertical-align: middle;
        }
        .sx-tc-list .username span{
          color: #fff;
          font-size: 0.65rem;
        }
        .sx-tc-list .img{
          position: relative;
        }
        .sx-tc-list .userimg{
            width: 100%;
            height: 14rem;
            margin-bottom: 0.35rem;
        }
        #loadingdi_huifu{
          margin-top: 50%;
        }
    </style>
</head>

<body>
    <script id="sx-list" type="text/x-dot-template">
      <div class="aui-row">
				{{ for(var i=0,it=it.data; i < it.length; i++) { }}
        <div class="aui-col-xs-6" tapmode onclick="video_list({{= it[i].id}})" id="id{{= it[i].id}}" data-data='{{= JSON.stringify(it[i])}}'>
          <div class="img">
            <img class="userimg" suxiangw-src="{{= _img(it[i].img,200,300,it[i].img?false:true) }}" src="../i/loading_300.png" />
            <div class="username aui-ellipsis-1">
              <img  src="{{= it[i].user.img ? _img(it[i].user.img,60,60) : '../i/touxiang.png' }}" />
              <span class="aui-ellipsis-1">{{= it[i].user.username}}</span>
            </div>
          </div>
          <div class="aui-ellipsis-2">{{= _text(it[i].content) }}</div>
        </div>
        {{ } }}
      </div>
		</script>
    <section class="sx-tc-list aui-grid" id="sx-view"><div id="loadingdi_huifu"><img src="../i/footer_progress.png" /></div></section>
</body>
<script type="text/javascript" src="../j/api.js"></script>
<script type="text/javascript">
  var text;
    apiready = function() {
      _list({url:'member/shoucang'});
  		// 监听滚动
  		api.addEventListener({
  			name : 'scrolltobottom',
  		}, function(ret, err) {
  			if (heigutgao == 1) {// heigutgao=1开启执行 0停止执行   防止连续滚动，等加载数据之后在进行滚动。
  				pagenum += 1
  				_list({url:'member/shoucang',page:pagenum});
  			}
  		});
    }
    // 打开滑动视频
    function video_list(id){
      var data = $('#id'+id).data('data');
      _video_list(data,'shoucang');
    }
</script>

</html>
